<template>
  <q-header elevated>
    <q-toolbar>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="toggleLeftDrawer"
      />

      <q-toolbar-title> 内部系统 </q-toolbar-title>
      
      <Notification />

      <q-btn-dropdown stretch flat label="管理员" icon="person">
        <q-list>
         <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>编辑个人资料</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="contact_phone" />
            </q-item-section>
          </q-item>
          <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>退出</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="login" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </q-toolbar>
  </q-header>

  <q-drawer v-model="menuOpened" bordered class="bg-grey-1">
    <q-list>
      <q-item-label header class="text-grey-8"> 菜单导航 </q-item-label>
      <template v-for="(menu_1, index) in menus">
        <!-- 没有孩子 -->
        <q-item
          v-if="!menu_1.children"
          clickable
          tag="a"
          :key="'a_' + index"
          :active="menu_1.name == routeName"
          active-class="baseItemActive"
          :to="{ name: menu_1.name }"
        >
          <q-item-section v-if="menu_1.icon" avatar>
            <q-icon :name="menu_1.icon" />
          </q-item-section>

          <q-item-section>
            <q-item-label>{{ menu_1.title }}</q-item-label>
            <q-item-label caption>
              {{ menu_1.caption }}
            </q-item-label>
          </q-item-section>
        </q-item>
        <!-- 有孩子 -->
        <q-expansion-item
          v-else
          :key="'a_' + index"
          :icon="menu_1.icon"
          :label="menu_1.title"
          :caption="menu_1.caption"
          :default-opened="parented(menu_1.name)"          
        >
          <q-item
            :inset-level="0.3"
            clickable
            tag="a"
            v-for="(menu_2, index_c) in menu_1.children"
            :to="{ name: menu_2.name }"
            :key="'c_' + index_c"
            :active="menu_1.name == routeName"
            active-class="baseItemActive"
          >
            <q-item-section v-if="menu_2.icon" avatar>
              <q-icon :name="menu_2.icon" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ menu_2.title }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-expansion-item>
      </template>
    </q-list>
  </q-drawer>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MenuItem } from "./models";
import { LeftMenuOpenKey } from "../settings/keys";
import { useStorage } from "@vueuse/core";
import { useRouter, useRoute } from "vue-router";
import Notification from "components/Notification.vue"
export default defineComponent({
  name: "Menu",
  props: {
    menus: {
      type: Array as PropType<MenuItem[]>,
      default: () => [],
    },
  },
   components: {
    Notification,
  },
  setup(props) {
    const menuOpened = useStorage(LeftMenuOpenKey, true);
    const route = useRoute();
    return {
      menuOpened,
      routeName: route.name,
      toggleLeftDrawer() {
        menuOpened.value = !menuOpened.value;
      },
      parented(name: String) {
        for(let i = 0; i < props.menus.length; i ++) {
          let menu_1 = props.menus[i];
          if (menu_1.name == name && menu_1.children) {
            for(let j = 0; j < menu_1.children.length; j ++){
              let menu_2 = menu_1.children[j];
              if (menu_2.name == route.name) {
                return true;
              }
            }
          }
        }
        return false;
      },
    };
  },
});
</script>

<style scoped lang="scss">
/* item 颜色 */
$ITEM_COLOR: #2c3e50;

/* item 激活时颜色 */
$ACTIVE_COLOR: #1976d2;
$ACTIVE_BACKGROUND: rgba(25, 118, 210, 0.0618);

.base-menu-item {
  color: $ITEM_COLOR !important;
}
/* item 被激活时父菜单的样式 */
.baseRootItemActive {
  color: $ACTIVE_COLOR !important;
}
/* item 被激活时的样式 */
.baseItemActive {
  color: $ACTIVE_COLOR !important;
  background: $ACTIVE_BACKGROUND;
  transition: all 0.618s;
  &:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background: $ACTIVE_COLOR !important;
    top: -0.5px;
    right: 0px;
  }
}
</style>